<template>
  <Card :padding="20" dis-hover>
    <div class="search">
      <Form ref="form" :model="formItem" inline :label-width="70">
        <FormItem prop="loginName" label="">
          <Input v-model="formItem.loginName" placeholder="请输入" style="width: 200px" />
        </FormItem>

        <FormItem label="状态" prop="status">
          <Select v-model="formItem.status" style="width: 200px" @on-change="areaChg">
            <Option v-for="item in statusList" :value="item.value" :key="item.value"
              >{{ item.name }}
            </Option>
          </Select>
        </FormItem>

        <Space>
          <Button type="primary" @click="initList(1, 15)" icon="md-search">查询</Button>
          <Button type="error" @click="clear" icon="md-refresh">重置</Button>
          <Button type="success" @click="add('add', {})" icon="md-add">新增</Button>
        </Space>
      </Form>
    </div>

    <Table
      :paras="{
        columns: table.columns,
        data: table.data,
        loading: table.load,
        pageNo: formItem.pageNo,
        pageSize: formItem.pageSize,
      }"
    >
      <template #Status="{ row }">
        <Tag color="green" v-if="row.status === 1">启用</Tag>
        <Tag color="magenta" v-if="row.status === 0">禁用</Tag>
      </template>
      <template #Action="{ row }">
        <Space>
          <Tooltip content="编辑" placement="top" transfer v-if="showTooltip">
            <Button type="primary" icon="md-create" @click="add('edit', row)"></Button>
          </Tooltip>
          <Poptip
            confirm
            title="是否启用?"
            @on-ok="cancel(row.userID, 1)"
            @on-cancel="cancel"
            ok-text="是"
            cancel-text="否"
            v-if="row.status === 0"
          >
            <Tooltip content="启用" placement="top" transfer>
              <Button v-if="row.status === 0" type="success" icon="md-checkmark"></Button>
            </Tooltip>
          </Poptip>
          <Poptip
            transfer
            confirm
            title="是否禁用?"
            v-if="row.status === 1"
            @on-ok="cancel(row.userID, 0)"
            @on-cancel="cancel"
            ok-text="是"
            cancel-text="否"
          >
            <Tooltip content="禁用" placement="top" transfer>
              <Button v-if="row.status === 1" type="error" icon="md-close-circle"></Button>
            </Tooltip>
          </Poptip>
        </Space>
      </template>
    </Table>
    <Pager
      :paras="{ total: table.total, pageNo: formItem.pageSize, pageSize: formItem.pageNo }"
      @toPage="initList"
      @toSize="initList"
    >
    </Pager>
  </Card>
</template>
<script setup>
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
import http from '@/util/http'
import { onActivated } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

let modal = ref()
let { proxy } = getCurrentInstance()
let form = ref()
let formItem = reactive({
  pageNo: 15,
  pageSize: 1,
  status: '',
  deptID: '',
  roleID: '',
  categoryID: '',
  phone: '',
  status: 0,
})

let statusList = reactive([
  {
    value: '',
    name: '全部',
  },
  {
    value: '1',
    name: '启用中',
  },
  {
    value: '2',
    name: '已停用',
  },
])
// const initstatusList = () => {
//   http.get('/Basic/Area/List', {}, (response) => {
//     statusList = response.data.data
//   })
// }
// initstatusList()

let table = reactive({
  data: [],
  total: 0,
  columns: [
    {
      title: '规则分类',
      align: 'center',
      key: 'loginName',
      width: 120,
    },
    {
      title: '规则名称',
      align: 'center',
      key: 'realName',
      width: 200,
    },
    {
      title: '规则描述',
      align: 'center',
      key: 'phone',
      width: 300,
    },
    {
      title: '问题分类',
      align: 'center',
      key: 'areaName',
      width: 140,
    },
    {
      title: '规则级别',
      align: 'center',
      key: 'deptName',
    },
    {
      title: '规则属性',
      align: 'center',
      key: 'roleName',
      width: 100,
    },
    {
      title: '创建人',
      align: 'center',
      key: 'categoryName',
      width: 100,
    },
    {
      title: '创建日期',
      align: 'center',
      key: 'addTime',
      width: 200,
    },
    {
      title: '操作',
      slot: 'Action',
      align: 'center',
      fixed: 'right',
    },
  ],
  load: true,
})

const initList = (page, size) => {
  formItem.pageNo = page
  formItem.pageSize = size
  table.load = true

  http.post('/Basic/User/PageList', toRaw(formItem), (response) => {
    table.load = false
    table.data = response.data.data.list
    table.total = response.data.data.total
  })
}

const refresh = () => {
  initList(1, 15)
}
const clear = () => {
  form.value.resetFields()
}
const showTooltip = ref(true)

const add = (type, data) => {
  // modal.value.show(type, data)
  showTooltip.value = false
  router.push({
    path: '/QualityControl/list/configurationQc',
    query: { type: type, data: JSON.stringify(data) },
  })
}

initList(1, 15)

const cancel = (id, status) => {
  http.post('/Basic/User/Enabled', { userID: id, status: status }, (response) => {
    if (response.data.flag) {
      proxy.$Message.success(response.data.msg)
      refresh()
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}
onActivated(() => {
  showTooltip.value = true
})
</script>
<style scoped>
.search {
  padding-bottom: 15px;
}
</style>
